<template>
  <view class="text2">
    <div class="charts-box">
      <h1 class="text1">医院设备支出统计</h1>
      <qiun-vue-ucharts
          type="pie"
          :opts="opts"
          :chartData="chartData"
      />
    </div>
    <div class="charts-box">
      <h1 class="text1">套餐分类统计</h1>
      <qiun-vue-ucharts
          type="column"
          :opts="opts1"
          :chartData="chartData1"
      />
    </div>
  </view>
</template>

<script>
// 需要在您的项目内执行 npm i @qiun/vue-ucharts
import qiunVueUcharts from '@qiun/vue-ucharts'
import {listHospitals} from '@/api/system/hospitals.js'
import {View} from "@element-plus/icons-vue";
import {listCategory} from "@/api/system/category.js"
export default {
  components: {
    View,
    qiunVueUcharts
  },
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
      chartData1: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts1: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,5,0,5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      }
    };
  },
  mounted() {
    this.getServerData();
    this.getServerData1();
  },
  methods: {
    async getServerData() {
      const response = await listHospitals()
      // 处理数据
      const seriesData = response.rows.map(item => ({
        name: item.name,
        value: item.hosptialvalue
      }))
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: []
            }
          ]
        };
        // this.chartData = JSON.parse(JSON.stringify(res));
        this.chartData = {
          series: [{
            data: seriesData
          }]
        }
      }, 500);
    },
    async getServerData1() {
      const response = await listCategory()
      let a=response.rows.map(item=>
        item.packageCount
      )
      let b=response.rows.map(item=>
        item.categoryName
      )
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: [],
          series: [
            {
              name: "",
              data: []
            }
          ]
        };
        this.chartData1 =  {
          categories: b,
          series: [{
            name: "套餐数量",
            data: a
          }]
        };
      }, 500);
    }
  }
};

</script>
<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 600px;
  height: 400px;
}
.text1{
     fontSize: 25px;
     color: #a39191;
    text-align: center;
}
.text2{
  display: flex;           /* 启用 Flex 布局 */
  justify-content: space-between; /* 左右分布 */
}
</style>